<!--
 * @Description: 标题栏组件
 * @Author: yue
 * @Date: 2022-09-18 11:04:53
 * @LastEditors: yue
 * @LastEditTime: 2022-09-21 09:54:20
-->

<!--
 * 自定义事件：
 * search：搜索传递对象{名称，状态}
 * add：添加
-->

<template>
  <div>
    <!-- NOTE：跳转标题 -->
    <div v-if="$route.query.subjectID" class="link">
      学科管理>{{ $route.query.subjectName }}>{{ $route.meta.title }}管理
    </div>

    <el-row>
      <!-- NOTE：输入框 -->
      <el-col :span="5">
        <el-row type="flex" align="middle">
          <span class="title">{{ title }}名称</span>
          <el-col :span="15">
            <el-input
              v-model="
                filterList[
                  $route.meta.title === '标签' ? 'tagName' : 'directoryName'
                ]
              "
              size="small"
            ></el-input>
          </el-col>
        </el-row>
      </el-col>
      <!-- NOTE：下拉菜单 -->
      <el-col :span="5">
        <el-row type="flex" align="middle">
          <span class="title">状态</span>
          <el-col :span="15">
            <el-select
              v-model="filterList.state"
              size="small"
              style="width: 120%"
            >
              <el-option
                v-for="item in type"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>

      <!-- NOTE：按钮 -->
      <el-col :span="6">
        <el-button size="small" @click="reset">清除</el-button>
        <el-button size="small" type="primary" @click="search">搜索</el-button>
      </el-col>

      <!-- NOTE：右侧按钮 -->
      <el-col :span="8">
        <el-row type="flex" justify="end" align="middle">
          <el-col v-if="$route.query.subjectID" :span="5">
            <el-link type="primary" :underline="false">← 返回学科</el-link>
          </el-col>
          <el-button
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="$emit('edit', 0)"
          >
            新增{{ title }}
          </el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterList: {
        [this.$route.meta.title === '标签' ? 'tagName' : 'directoryName']: '', // 标签名称
        state: '' // 状态
      },
      // 转换类型
      type: [
        {
          id: 0,
          name: '禁用'
        },
        {
          id: 1,
          name: '启用'
        }
      ]
    }
  },
  computed: {
    // 标签名
    title() {
      return this.$route.meta.title
    }
  },
  methods: {
    // 重置
    reset() {
      this.filterList = {
        [this.$route.meta.title === '标签' ? 'tagName' : 'directoryName']: '', // 标签名称
        state: '' // 状态
      }
      console.log(this.$route)
    },
    // 搜索
    search() {
      console.log(this.filterList)
      this.$emit('search', this.filterList)
      console.log(this.title)
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin: 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #606266;
}
.link {
  margin-bottom: 30px;
}
</style>
